<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="css">
        ul,li{list-style: none;}
        a{text-decoration: none;}
        *{margin: 0;padding: 0;}
        body,html{width: 100%;height: 100%;font-size: 625%;}
        body{font-size: .16rem;}
        .navigate-wrapper{width: 2.5rem;background-color: #252525}
        .navigate-wrapper a{ color: #fff;font-size: .14rem;display: block;}
        .navigate-title{height: .7rem;background-repeat: no-repeat;background-position: center;background-size: 60%;
            background-image: url(https://gw.alicdn.com/tps/TB1xno8OFXXXXXNaFXXXXXXXXXX-338-80.png);
        }
        .navigate-wrapper .navigate-root>li{
            border-bottom: solid 1px #000000;
            border-top: solid 1px #424242;
        }
        .navigate-wrapper .navigate-root li ul{
            transition: all .5s ease-in-out; max-height: 0;overflow: hidden;
        }
        .navigate-wrapper .navigate-root>li a{
            height: .45rem;line-height: .45rem;text-indent: .4rem
        }
        .navigate-wrapper .navigate-root>li ul>li>a{
            background-color: #2f3437;
            height: .35rem;line-height: .35rem;border-top: solid 1px #3f4041;
            text-indent: .6rem
        }
        .navigate-wrapper .navigate-root>li ul>li>ul>li>a{
            background-color: grey;
            height: .35rem;line-height: .35rem;border-top: solid 1px #3f4041;
            text-indent: .8rem
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="navigate-wrapper">
        <h4 class="navigate-title"></h4>
        <ul class="navigate-root">
            <li>
                <a href="#" class="navigate-item-ico">IT技术</a>
                <ul>
                    <li><a href="#">java</a></li>
                    <li><a href="#">android</a></li>
                    <li><a href="#">javascript</a></li>
                    <li>
                        <a href="#">php</a>
                        <ul>
                            <li><a href="#">2go</a></li>
                            <li><a href="#">2sd</a></li>
                            <li><a href="#">2ad</a></li>
                        </ul>
                    </li>
                    <li><a href="#">...</a>
                        <ul>
                            <li>
                                <a href="#">vs</a>
                            </li>
                            <li><a href="#">go</a></li>
                            <li><a href="#">sd</a></li>
                            <li><a href="#">ad</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            <li>
                <a href="#" class="navigate-item-ico">电影</a>
                <ul>
                    <li><a href="#">电影1</a></li>
                    <li><a href="#">电影2</a></li>
                    <li><a href="#">电影3</a></li>
                    <li><a href="#">电影4</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    <script>
        $(function(){
            $('.navigate-root a').click(function(){
                if($(this).next().css('max-height')=='0px'){
                    
                    // $(this).parent().siblings().find('ul').slideUp(500)
                    
                        console.log($(this).parent().siblings().find('ul').css('max-height'))
                        $(this).parent().siblings().find('ul').css('max-height','0')

                    if($(this).parent().siblings().find('ul').css('max-height')!='0px'){
                        setTimeout(()=>{
                            console.log(12313123)
                            $(this).next().css('max-height','1000px')
                        },500)
                    }else{
                        $(this).next().css('max-height','1000px')
                    }
                   
                }else{
                    

                        $(this).next().css('max-height','0')
                    
                    
                }
            })
        })

    </script>
</body>
</html>